<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <el-form @submit.native.prevent :model="queryParams" :inline="true">
            <el-form-item label="用户昵称">
                <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px"
                    placeholder="请输入用户昵称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格展示 -->
        <el-table border :data="onlineList" v-loading="loading">
            <!-- 用户头像 -->
            <el-table-column prop="avatar" label="头像" align="center" width="100">
                <template #default="scope">
                    <img :src="scope.row.avatar" width="40" height="40" />
                </template>
            </el-table-column>
            <!-- 昵称 -->
            <el-table-column prop="nickname" label="昵称" align="center" width="200"></el-table-column>
            <!-- 登录ip -->
            <el-table-column prop="ipAddress" label="登录ip" align="center" width="150"></el-table-column>
            <!-- 登录地址 -->
            <el-table-column prop="ipSource" label="登录地址" align="center" width="190"></el-table-column>
            <!-- 操作系统 -->
            <el-table-column prop="os" label="操作系统" align="center" width="150"></el-table-column>
            <!-- 浏览器 -->
            <el-table-column prop="browser" label="浏览器" align="center" width="150"></el-table-column>
            <!-- 登录时间 -->
            <el-table-column prop="loginTime" label="登录时间" align="center" width="200">
                <template #default="scope">
                    <div class="create-time">
                        <el-icon>
                            <clock />
                        </el-icon>
                        <span style="margin-left: 10px">{{ formattedDate(scope.row.loginTime) }}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="danger" class="el-icon-delete" size="mini" plain @click="kick(scope.row.id)">
                        下线
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
            :total="count"   
            :page.sync="queryParams.current" 
            :limit.sync="queryParams.size"     
            @pagination="getList" 
          />
    </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import {getAllOnlineUser, offlineUser} from'@/api/user'
export default {
  data() {
    return {
    count: 0,
    loading: false,
    queryParams: {
        current: 1,
        size: 10,
    },
    onlineList: [],
    }
  },
  methods: {
    formattedDate(date) {
      return formatDate(date);
    },
    handleQuery(){
      this.getList();
    },
    //下线
    kick(id){
        this.$confirm('是否确定下线改用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          offlineUser(id).then((data)=>{
            if(data.code == 200){
              this.$message({type: 'success', message: '下线成功！'})
              this.getList();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消下线！'})
        });
    },
    getList(){
    this.loading = true;
    getAllOnlineUser(this.queryParams).then((res) => {
      if(res.code == 200)
      {
        this.onlineList = res.data.recordList;
        this.count = res.data.count;
        this.loading = false;
      }
    });
    },
  },
  mounted() {
    this.getList();
  },
}
</script>

<style>

</style>